<template>
    <div class="register-container">
        <h2>商家注册</h2>

        <div class="form-group">
            <label>商家图片</label>
            <div class="image-upload">
                <img v-if="previewImage" :src="previewImage" class="preview-image">
                <label for="image-upload" class="upload-button">
                    {{ previewImage ? '更换图片' : '选择图片' }}
                </label>
                <input type="file" id="image-upload" accept="image/*" @change="handleImageUpload" class="file-input">
            </div>
        </div>

        <div class="form-group">
            <label>商家名称</label>
            <input v-model="business.businessName" placeholder="请输入商家名称">
        </div>

        <div class="form-group">
            <label>登录密码</label>
            <input type="password" v-model="business.password" placeholder="请输入密码">
        </div>

        <div class="form-group">
            <label>商家地址</label>
            <input v-model="business.businessAddress" placeholder="请输入详细地址">
        </div>

        <div class="form-group">
            <label>商家介绍</label>
            <textarea v-model="business.businessExplain" placeholder="商家简介"></textarea>
        </div>

        <div class="form-group">
            <label>分类</label>
            <select v-model="business.orderTypeId">
                <option value="1">美食</option>
                <option value="2">早餐</option>
                <option value="3">跑腿代购</option>
                <option value="4">汉堡拔萨</option>
                <option value="5">甜品饮品</option>
                <option value="6">速食简餐</option>
                <option value="7">地方小吃</option>
                <option value="8">米粉面馆</option>
                <option value="9">包子粥铺</option>
                <option value="10">炸鸡炸串</option>
            </select>
        </div>

        <div class="form-group">
            <label>起送费</label>
            <input type="number" v-model="business.starPrice" placeholder="起送价格" min="0" step="0.01">
        </div>

        <div class="form-group">
            <label>配送费</label>
            <input type="number" v-model="business.deliveryPrice" placeholder="配送费用" min="0" step="0.01">
        </div>

        <button @click="register" :disabled="isLoading" class="register-button">
            {{ isLoading ? '注册中...' : '注册商家' }}
        </button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            business: {
                businessName: '',
                password: '',
                businessAddress: '',
                businessExplain: '',
                businessImg: '',
                orderTypeId: 1,
                starPrice: 0,
                deliveryPrice: 0,
                remarks: ''
            },
            previewImage: null,
            isLoading: false
        }
    },
    methods: {
        handleImageUpload(event) {
            const file = event.target.files[0];
            if (!file) return;

            if (!file.type.match('image.*')) {
                alert('请选择图片文件');
                return;
            }

            if (file.size > 2 * 1024 * 1024) {
                alert('图片大小不能超过2MB');
                return;
            }

            const reader = new FileReader();
            reader.onload = (e) => {
                const fullBase64 = e.target.result;
                this.previewImage = fullBase64;
                this.business.businessImg = fullBase64;
            };
            reader.readAsDataURL(file);
        },
        register() {
            // 去除重复前缀
            this.business.businessImg = this.removeDuplicatePrefix(this.business.businessImg);

            // 基本验证
            if (!this.business.businessName || !this.business.password) {
                alert('商家名称和密码不能为空');
                return;
            }

            if (!this.business.businessImg) {
                alert('请上传商家图片');
                return;
            }

            this.isLoading = true;

            this.$axios.post('BusinessController/saveBusiness', this.$qs.stringify(this.business))
               .then(response => {
                    const data = response.data;
                    if (data.success) {
                        const businessId = data.businessId;
                        alert(`注册成功！您的商家ID是：${businessId}\n请务必记录此ID，登录时需要用到。`);
                        this.$router.push('/businessLogin');
                    } else {
                        alert(data.message);
                    }
                })
               .catch(error => {
                    console.error('注册错误:', error);
                    alert('注册过程中发生错误');
                })
               .finally(() => {
                    this.isLoading = false;
                });
        },

        removeDuplicatePrefix(base64Data) {
            const prefixes = ['data:image/jpeg;base64,', 'data:image/png;base64,'];
            let newData = base64Data;
            prefixes.forEach(prefix => {
                const count = (newData.match(new RegExp(prefix, 'g')) || []).length;
                if (count > 1) {
                    newData = newData.replace(new RegExp(prefix, 'g'), '').trim();
                    newData = prefix + newData;
                }
            });
            return newData;
        }
    }
}
</script>
<style scoped>
    .register-container {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    h2 {
        text-align: center;
        margin-bottom: 25px;
        color: #0097FF;
    }

    .form-group {
        margin-bottom: 20px;
    }

    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }

    input,
    textarea,
    select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }

    .image-upload {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .preview-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    .upload-button {
        display: inline-block;
        padding: 8px 15px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .upload-button:hover {
        background-color: #e9e9e9;
    }

    .file-input {
        display: none;
    }

    .register-button {
        width: 100%;
        background-color: #0097FF;
        color: white;
        padding: 12px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
        transition: background-color 0.3s;
    }

    .register-button:hover {
        background-color: #0081e6;
    }

    .register-button:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
    }
</style>